import React, {useEffect, useState} from "react";
import {Col, Collapse, Empty, Row, Steps, Table, Timeline} from "antd";
import FileLink from "../FileLink";

function RecordProcessHistory(props) {
    const {Panel} = Collapse;
    const {Step} = Steps;

    const recordTaskSno = props["recordTaskSno"];
    const recordProcessHistoryArr = props["recordProcessHistoryArr"];
    const auditRecordArr = props["auditRecordArr"];

    const [current, setCurrent] = useState(1);

    const columns = [
        {title: '序号', dataIndex: 'order', key: 'order'},
        {title: '案件流程', dataIndex: 'stage', key: 'stage'},
        {title: '流程开始时间', dataIndex: 'startAtStr', key: 'startAtStr'},
        {title: '流程结束时间', dataIndex: 'endAtStr', key: 'endAtStr'},
        {title: '是否同意', dataIndex: 'isAgree', key: 'isAgree'},
        {title: '处理状态', dataIndex: 'isDealt', key: 'isDealt'},
        {title: '处理人', dataIndex: 'handlerName', key: 'handlerName'},
    ];

    const expandedRowRender = (record) => {
        const tempAuditRecordArr = [];
        const processHistoryId = record.id;

        for (let i = 0; i < auditRecordArr.length; i++) {
            if (auditRecordArr[i].parkLotRecordProcessHistoryId === processHistoryId) {
                tempAuditRecordArr.push(auditRecordArr[i]);
            }
        }

        if (!tempAuditRecordArr.length) {
            return (
                <div>
                    <Empty description={<div>暂无数据</div>}/>
                </div>
            );
        }

        return (
            <div style={{paddingLeft: "15px", paddingTop: "10px"}}>
                <Timeline>
                    {
                        tempAuditRecordArr.map((auditRecord) => {
                            return (
                                <Timeline.Item key={auditRecord.id}>
                                    <h3>{auditRecord?.createdAtStr}</h3>
                                    <Row className={"expandInfo"}>
                                        <Col span={6}>
                                            <span>审核人：</span>
                                            <span>{record?.handlerName}</span>
                                        </Col>
                                        <Col span={6}>
                                            <span>审核结果：</span>
                                            <span>{auditRecord?.status === 1 ? "审核通过" : "审核不通过"}</span>
                                        </Col>
                                        <Col span={6}>
                                            <span>审核意见：</span>
                                            <span>{auditRecord?.auditReason}</span>
                                        </Col>
                                        <Col span={6}>
                                            <Row>
                                                <Col span={4}>
                                                    <span>附件：</span>
                                                </Col>
                                                <Col span={20}>
                                                    <span>{""}</span>
                                                    <br/>
                                                </Col>
                                            </Row>
                                        </Col>
                                    </Row>

                                    {
                                        auditRecord?.recordAssignTasks.map((assignTask) => {
                                            return (
                                                <div key={assignTask?.id.toString()}>
                                                    <Row className={"expandInfo"}>
                                                        <Col span={24}>
                                                            <span>整改任务：</span>
                                                            <span>{assignTask?.name}</span>
                                                        </Col>
                                                    </Row>

                                                    <Row className={"expandInfo"}>
                                                        <Col span={24}>
                                                            {assignTask?.assignTaskItems.map((assignTaskItem) => {
                                                                return (
                                                                    <span key={assignTaskItem?.id.toString()}>
                                                                        <span>{assignTaskItem?.status === 1 ? "已完成" : "未完成"} [{assignTaskItem?.name}] </span>
                                                                        <FileLink fileName={"file1"}/>
                                                                    </span>
                                                                );
                                                            })}
                                                        </Col>
                                                    </Row>
                                                </div>
                                            );
                                        })
                                    }
                                </Timeline.Item>
                            );
                        })
                    }
                </Timeline>
            </div>
        );
    }

    useEffect(() => {
        getCurrentStep(recordProcessHistoryArr);
    });

    const getCurrentStep = (processHistoryArr) => {
        const processHistory = processHistoryArr[processHistoryArr.length - 1];
        if (processHistoryArr.length !== 0) {
            let stage = processHistory.order;
            if (processHistory.isDealt === "已处理") {
                stage = stage + 1;
                setCurrent(stage);
            } else {
                setCurrent(stage);
            }
        } else {
            setCurrent(0);
        }
    }

    return (
        <div>
            <Steps current={current}>
                <Step title="在线备案"/>
                <Step title="资料初审"/>
                <Step title="现场勘察"/>
                <Step title="领导复审"/>
            </Steps>
            <Collapse defaultActiveKey={['1']} ghost>
                <Panel header={"流水号：" + (recordTaskSno === "" || recordTaskSno === null ?
                    "null" : recordTaskSno)} key="1">
                    <Table
                        size={"small"}
                        columns={columns}
                        pagination={false}
                        expandable={{
                            expandedRowRender,
                        }}
                        dataSource={recordProcessHistoryArr}
                    />
                </Panel>
            </Collapse>
        </div>
    );
}

export default RecordProcessHistory;